iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 11
1
自我挑戰組

一週程式專案挑戰系列 第 11

[專案02]自製踩地雷(四)隨機地圖製作

  • 分享至 

  • xImage
  •  

打算用抽撲克牌原理來製作隨機地圖,不過中間想歪所以程式出錯。

【大綱】

  • 程式實作
  • 抽撲克牌原理
  • 心得

【程式實作】

參考:JS 隨機整數JS 陣列
上面是MDN教學,需要花時間來讀。

目前是用3x3地圖做測試

<!-- 建立地圖 -->
	var map = document.getElementsByClassName("map");
	var maxwd;//地圖總格數
	maxwd=9;

用抽撲克牌來建立炸彈位置

<!-- 放置炸彈 -->
	console.log("0:unknow 1:empty 2:number 3:boom")
	var boommap=[],randmap=[],boom=[];	
	var boomi,boomj,boomnum;
	boomnum=9;
	<!-- init -->
	for(var bi=0;bi<=maxwd;bi++){
		boommap.push(0);//0是未知狀況
		randmap.push(bi);
	}
	

boomnum:炸彈數目
炸彈一次放滿9個是為了做測試,
看炸彈會不會重複放在同一個地方。
測試後發現有出錯

    //隨機數字
    function getRandInt(max){
        return Math.floor(Math.random()*max);
	}
    
	<!-- 確認隨機炸彈範圍 -->
	for (var numi=0;numi<boomnum;numi++){	
		boomj=getRandInt(maxwd-numi);
		boom.push(boomj);
        
		console.log("number:",boomj);
		console.log("indexof:",randmap.indexOf(boomj));
		randmap.splice(randmap.indexOf(boomj),1);
		console.log("len:",randmap.length)
	}
	
	boom.forEach(function(item,index,array){
		console.log("[",index,"]=",item);
	});

【抽撲克牌原理】

撲克牌原理說明

撲克牌有52張不同的牌,
每次抽牌就放在墓地,
不丟回去牌庫。

這樣可以保證每次抽牌,
不會抽到同一張牌。

隨機不重複數字

同樣的,
如果要隨機抽出不重複數字,
也可以用抽撲克牌方法。

建立陣列(牌庫)並放入不同數字(牌),
每抽出一個數字,
就從原陣列(牌庫)移除,
放到新陣列(墓地)。


【心得】

知道抽撲克牌原理,
可是寫不出正確的程式。
有想到解法不過時間有限,
明天看能不能完成。

感謝撥冗閱讀,
有錯誤地方請多指教。


上一篇
[專案02]自製踩地雷(三)用JS控制地圖大小
下一篇
[專案02]自製踩地雷(五)隨機地雷放置完成
系列文
一週程式專案挑戰26
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
ccutmis
iT邦高手 2 級 ‧ 2019-09-13 00:50:05

有個不錯的js洗牌函式範例提供您參考

<h3>洗牌前</h3>
<div id="cards1"></div>
<h3>洗牌後</h3>
<div id="cards2"></ul>
<script>
let cardsArr=[];
for(let i=0;i<52;i++) cardsArr.push(i+1);

//洗牌程式
function shuffle(array) {
  for (let i = array.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
}

document.querySelector('#cards1').innerHTML=cardsArr.toString();
shuffle(cardsArr);
document.querySelector('#cards2').innerHTML=cardsArr.toString();
</script>

來源網址:
http://shubo.io/javascript-random-shuffle/

謝謝你的教學

ccutmis iT邦高手 2 級 ‧ 2019-09-13 21:14:13 檢舉

^^不客氣 中秋節快樂!

也祝你中秋節快樂!

我要留言

立即登入留言